<template>
  <v-app>
    <component :is="currentLayout" v-if="isRouterLoaded">
      <router-view></router-view>
    </component>
  </v-app>
</template>

<script setup>
import MainLayout from '@/components/layout/MainLayout.vue';
import DefaultLayout from '@/components/layout/DefaultLayout.vue'
import AuthLayout from '@/components/layout/AuthLayout.vue'
const route = useRoute();

// 判断路由是否加载完毕
const isRouterLoaded = computed(() => {
  if (route.name !== null) return true;
  return false;
});

// 定义布局
const layouts = {
  main: MainLayout,
  default: DefaultLayout,
  auth: AuthLayout
};

const currentLayout = computed(() => {
  const layoutName = route.meta.layout;
  if (!layoutName) {
    return DefaultLayout;
  }
  return layouts[layoutName];
});


</script>

<style lang="scss" scoped></style>